@charset "UTF-8";
:root { --max-width: 600px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body, #app { min-height: 100%; background-color: #f3f3f3; }

body, ul, li { margin: 0; padding: 0; }

li { list-style: none; }

a { text-decoration: inherit; color: inherit; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }

input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

input, textarea, button, select { outline: none; }

#app { width: 100%; max-width: 600px; margin: auto; font-size: 1.6rem; font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; visibility: hidden; opacity: 0; transition: linear 0.2s; }

#app.on { visibility: visible; opacity: 1; }

.clamp { overflow: hidden; }

.link-success { color: #7cc0a9; }

.link-warning { color: #d59d6b; }

.link-danger { color: #fe7d7d; }

.link-primary { color: #5d5def; }

.label { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 1rem; background-color: #666; color: #fff; font-size: 1rem; font-weight: normal; line-height: normal; }

.label-success { background-color: #7cc0a9; }

.label-warning { background-color: #d59d6b; }

.label-danger { background-color: #fe7d7d; }

.label-primary { background-color: #5d5def; }

.label-info { background-color: #8eb3d4; }

.label-dark { background-color: #2c2c2c; }

.label-gray { background-color: #9f9f9f; }

.badge { display: inline-block; width: 0.8rem; height: 0.8rem; background-color: #ccc; border-radius: 50%; vertical-align: middle; }

.badge.badge-danger { background-color: #fe7d7d; }

.btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; padding: 1rem 2rem; font-size: 2rem; border: 1px solid #ccc; background-color: #fff; color: #888; transition: linear 0.2s; outline: none; }

.btn.btn-small { width: auto; font-size: 1rem; padding: .4rem 1.2rem; }

.btn.btn-half-round { border-radius: 0.8rem; }

.btn:hover, .btn:active { border: 1px solid #b3b3b3; }

.btn.btn-success { background-color: #7cc0a9; border: 1px solid #7cc0a9; color: #fff; }

.btn.btn-success:hover, .btn.btn-success:active { border: 1px solid #4bb995; background-color: #4bb995; }

.btn.btn-warning { background-color: #d59d6b; border: 1px solid #d59d6b; color: #fff; }

.btn.btn-warning:hover, .btn.btn-warning:active { border: 1px solid #cf894b; background-color: #cf894b; }

.btn.btn-danger { background-color: #fe7d7d; border: 1px solid #fe7d7d; color: #fff; }

.btn.btn-danger:hover, .btn.btn-danger:active { border: 1px solid #ff5c5c; background-color: #ff5c5c; }

.btn.btn-primary { background-color: #5d5def; border: 1px solid #5d5def; color: #fff; }

.btn.btn-primary:hover, .btn.btn-primary:active { border: 1px solid #251fce; background-color: #251fce; }

.btn.btn-light { border: 1px solid #fff; }

.btn.btn-dark { border: 1px solid #2c2c2c; background-color: #2c2c2c; color: #fff; }

.dropload-up, .dropload-down { position: relative; height: 0; overflow: hidden; font-size: 12px; /* 开启硬件加速 */ -webkit-transform: translateZ(0); transform: translateZ(0); }

.dropload-down { height: 50px; }

.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData { height: 50px; line-height: 50px; text-align: center; }

.dropload-load .loading { display: inline-block; height: 15px; width: 15px; border-radius: 100%; margin: 6px; border: 2px solid #666; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rotate 0.75s linear infinite; animation: rotate 0.75s linear infinite; }

@-webkit-keyframes rotate { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

@keyframes rotate { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

.toast { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; }

.toast.on { visibility: visible; opacity: 1; }

.toast .toast-box { position: relative; top: 40%; display: inline-block; padding: 0 2rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.4rem; line-height: 3em; border-radius: 4px; }

.loading { position: fixed; z-index: 10001; top: 0; left: 0; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; }

.loading.on { visibility: visible; opacity: 1; }

.loading .loading-box { position: relative; top: 40%; display: inline-block; padding: 0 2rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.4rem; border-radius: 4px; line-height: 3rem; }

.loading .loading-box i { line-height: inherit; }

.media { position: fixed; z-index: 10; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; background-color: rgba(0, 0, 0, 0.6); }

.media.on { visibility: visible; opacity: 1; }

.media.on .media-box { transform: translateY(0); }

.media .media-box { position: relative; width: 80%; padding: 0 1rem; background-color: #fff; font-size: 1rem; line-height: 3em; border-radius: 4px; transform: translateY(-1rem); transition: linear .15s; min-height: 16.5rem; }

.media .media--header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #ccc; font-size: 1.6rem; line-height: 3.8rem; }

.media .media--body { min-height: 6rem; max-height: 60%; padding: 0.6rem 0; overflow-y: auto; }

.media .media--footer { display: flex; justify-content: flex-end; align-items: center; padding: 0.8rem 0; border-top: 1px dashed #ccc; font-size: 1.6rem; }

.media .media--footer .btn { margin-left: 0.8rem; padding: .8rem 1.8rem; font-size: 1.4rem; }

.confirm { position: fixed; z-index: 10; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; background-color: rgba(0, 0, 0, 0.6); }

.confirm.on { visibility: visible; opacity: 1; }

.confirm.on .confirm-box { transform: translateY(0); }

.confirm .confirm-box { position: relative; width: 70%; max-height: 80%; min-height: 1rem; background-color: #fff; font-size: 1rem; line-height: 3em; border-radius: 4px; transform: translateY(-1rem); transition: linear .15s; overflow: hidden; }

.confirm .confirm--title { padding: 1.2rem 0; font-size: 1.4rem; text-align: center; }

.confirm .confirm--button { display: flex; justify-content: space-around; align-items: center; font-size: 1.4rem; }

.confirm .confirm--button > * { width: 100%; padding: 0.7rem 0; font-size: inherit; color: inherit; }

.confirm .confirm--button .confirm-complete { color: #fff; background-color: #5d5def; border-top: 1px solid #5d5def; }

.confirm .confirm--button .confirm-close { border-top: 1px solid #f0f0f0; }

.half-screen-dialog { visibility: hidden; position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: linear 0.2s 0.2s; }

.half-screen-dialog.on { visibility: visible; opacity: 1; transition: linear 0.2s; }

.half-screen-dialog .half-screen-dialog--header { height: 2rem; text-align: center; }

.half-screen-dialog .half-screen-dialog--body { padding: 0 2rem 1rem; max-height: calc(100% - 7rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.half-screen-dialog .half-screen-dialog--footer { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; margin: auto; padding: 1rem 2rem; font-size: 1.6rem; color: #9f9f9f; }

.half-screen-dialog .half-screen-dialog--footer .btn { padding: 0.4rem 1.8rem; font-size: 1.6rem; }

.half-screen-dialog .half-screen-dialog-box { position: absolute; z-index: 1; top: 0; bottom: 0; right: -100%; width: 70%; height: 100%; background-color: #fff; }

.navbar { background-color: #fff; }

.navbar .navbar-box { display: flex; padding-top: 0.4rem; border-bottom: 1px solid #fcfcfc; line-height: 4rem; }

.navbar .navbar-box .navbar--item { position: relative; width: 100%; text-align: center; }

.navbar .navbar-box .navbar--item::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: block; width: 36%; height: 4px; margin: auto; border-radius: 4px; background-color: #5d5def; transition: ease .2s; transform-origin: center center; transform: scaleX(0); }

.navbar .navbar-box .navbar--item.active { font-size: 1.8rem; font-weight: 800; }

.navbar .navbar-box .navbar--item.active::after { transform: scaleX(1); }

.toolbar { background-color: #fff; }

.toolbar .toolbar-box { display: flex; line-height: 5rem; color: #333; text-align: center; }

.toolbar .toolbar-box .toolbar--item { position: relative; width: 100%; color: #5a5a5a; }

.toolbar .toolbar-box .toolbar--item.disabled { color: #ddd; cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.toolbar .toolbar-box .toolbar--item:not(:first-child)::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: -1px; width: 0; height: 1.4rem; margin: auto; border-left: 1px solid #eee; }

.searchbar { background-color: #f3f3f3; height: 0rem; transition: linear .2s; overflow: hidden; }

.searchbar.on { height: 5rem; }

.searchbar .searchbar-box { display: flex; padding: 1rem 2rem; }

.searchbar .searchbar-box .searchbar--write { flex: 1; width: 100%; }

.searchbar .searchbar-box .searchbar--write .search--write-input { width: 100%; padding: 1rem; background-color: #fff; border: none; line-height: 2rem; height: 4rem; font-size: 1.6rem; caret-color: #5d5def; }

.searchbar .searchbar-box .searchbar--btn { margin-left: 1rem; line-height: 4rem; }

.searchbar .searchbar-box .searchbar--btn .search--btn-link { color: #5d5def; font-size: 1.6rem; }

.list { margin: 1rem 0; min-height: 50%; }

.list .list-box { width: 100%; color: #a6a6a6; background-color: #fff; }

.list .list-box .empty { position: relative; height: 30rem; }

.list .list-box .empty::after { content: '暂无数据'; position: absolute; top: 10rem; left: 0; right: 0; margin: auto; text-align: center; }

.list .list-box .list--item { width: 100%; padding: 0 0 0 1.4rem; }

.list .list-box .list--item .list--item-box { padding: 1rem 1.4rem 2rem 0; }

.list .list-box .list--item:not(:first-child) .list--item-box { border-top: 1px solid #f0f0f0; }

.list .list-box .list--item--title { display: flex; justify-content: space-between; align-items: center; }

.list .list-box .list--item--title .list--item--title-text { margin-right: 1rem; color: #000; font-weight: 800; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; }

.list .list-box .list--item--title .list--item--title-text .badge { margin-left: 6px; }

.list .list-box .list--item--title .list--item--title-text::before { content: ''; display: inline-block; width: 4px; height: 1.4rem; margin-right: 0.8rem; border-radius: 0.6rem; background-color: #5d5def; vertical-align: -1px; }

.list .list-box .list--item--title .list--item--title-time { font-size: 90%; vertical-align: middle; font-weight: normal; white-space: nowrap; }

.list .list-box .list--item--content { display: flex; margin-top: 1.6rem; align-items: center; }

.list .list-box .list--item--content .list--item--content-avatar { flex-shrink: 0; align-self: flex-start; width: 5rem; height: 5rem; margin-right: 0.5rem; padding-right: 1rem; padding-bottom: 1rem; }

.list .list-box .list--item--content .list--item--content-avatar img { width: 100%; height: 100%; border-radius: 50%; }

.list .list-box .list--item--content .list--item--content-main { flex: 1; width: 100%; margin-top: -0.5rem; overflow: hidden; }

.list .list-box .list--item--content .list--item--content-main p { width: 100%; margin: 0 0 0.4rem; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.list .list-box .list--item--content .list--item--content-main .list--item--content--title { display: inline-flex; margin-bottom: 0.8rem; font-size: 115%; color: #333; justify-content: space-between; align-items: baseline; white-space: initial; overflow: initial; text-overflow: initial; }

.list .list-box .list--item--content .list--item--content-main .list--item--content--title .label { flex-shrink: 0; margin-top: 0.5rem; }

.list .list-box .list--item--content .list--item--content-main .list--item--content--title > *:not(:first-child) { margin-left: 1rem; }

.list .dropload-down { background-color: #fff; }

.half-screen-dialog { visibility: hidden; position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: linear 0.2s 0.2s; }

.half-screen-dialog.on { visibility: visible; opacity: 1; transition: linear 0.2s; }

.half-screen-dialog .half-screen-dialog--header { height: 2rem; text-align: center; }

.half-screen-dialog .half-screen-dialog--body { padding: 0 2rem 1rem; max-height: calc(100% - 7rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.half-screen-dialog .half-screen-dialog--footer { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; margin: auto; padding: 1rem 2rem; }

.half-screen-dialog .half-screen-dialog--footer .btn { padding: 0.4rem 1rem; font-size: 1.6rem; }

.half-screen-dialog .half-screen-dialog-box { position: absolute; z-index: 1; top: 0; bottom: 0; right: -100%; width: 70%; height: 100%; background-color: #fff; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access:not(:first-child) { margin-top: 2rem; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title { position: relative; font-size: 1.4rem; line-height: 2rem; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title::before { content: ''; display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; margin-right: 1rem; background-color: #ccc; line-height: 1rem; vertical-align: -1px; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title.primary::before { background-color: #5d5def; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title.success::before { background-color: #7cc0a9; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title.warning::before { background-color: #d59d6b; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--title.dark::before { background-color: #2c2c2c; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--content { display: -ms-grid; display: grid; -ms-grid-columns: fit; grid-template-columns: fit; grid-row-gap: 1rem; grid-template-columns: repeat(auto-fill, 46%); justify-content: space-between; margin-top: 1rem; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--content .btn { padding: 0 .2rem; width: 100%; height: 4rem; font-size: 1.2rem; }

.half-screen-dialog .half-screen-dialog-box .half-screen-dialog--access--content > li { line-height: 1rem; }
